<template>
  <div>
    <img src="./../../assets/logo.png"> 
    <h1>{{ msg }}</h1>
    <input type="text" placeholder="产品名称" ref="inputName" v-on:keyup="inputName"/>
    <input type="text" placeholder="食品种类" ref="inputProject" v-on:keyup="inputProject"/>
    <input type="text" placeholder="产品原产地" ref="inputLocation" v-on:keyup="inputLocation"/>
    <input type="text" placeholder="录入人员" ref="inputCreator" v-on:keyup="inputCreator"/>
    <input type="button" value="确认" v-on:click="clickOn"/>
  </div>
</template>

<script>
import axios from 'axios'
var newID 
export default {
  name: 'create',
  
  data () {
    return {
      msg: '欢迎使用',
      id : null,
      name: null,
      location: null,
      creator: null,
      newid: null,
      time: null,
      project:null,
      inputVal: null,
      iName:'',
      iProject:'',
      iLocation:'',
      iCreator:'',
    }
  },
    methods: {
     getData() {
      const url = `http://10.78.34.150:8082/v1/trace/get?uid=${newID}`;
      console.log('[Airport getData] url', url);
      axios.get(url).then((res)=>{
              this.id = res.data.data.ID
              this.name = res.data.data.Name
              this.location = res.data.data.Location
              this.creator = res.data.data.Creator
              this.time = res.data.data.Time
              this.project = res.data.data.Project
              console.log(3333333,res)
      });
      
    },
    updateData(name,project,creator,location){
      const url = `http://10.78.34.150:8082/v1/trace/add`;
      axios.post(url,{
        name: name,
        project: project,
        creator: creator,
        location: location,
      }).then((res)=>{
        newID = res.data.data
        console.log('newID',newID)
        this.$router.push({ path: '/get?$uid=' + this.newID });
      })
    },
    clickOn: function () {
      console.log('iName',this.iName)
      console.log('iProject',this.iProject)
      console.log('iLocation',this.iLocation)
      console.log('iCreator',this.iCreator)
      this.updateData(this.iName, this.iProject,this.iLocation,this.iCreator)
    
    },
    inputName: function(){
      console.log(this.$refs.inputName.value)
      this.iName = this.$refs.inputName.value
    },
    inputProject: function(){
      console.log(this.$refs.inputProject.value)
      this.iProject = this.$refs.inputProject.value
    },
    inputLocation: function(){
      console.log(this.$refs.inputLocation.value)
      this.iLocation = this.$refs.inputLocation.value
    },
    inputCreator: function(){
      console.log(this.$refs.inputCreator.value)
      this.iCreator = this.$refs.inputCreator.value
       
    },            
  },
  // mounted(){
  //   this.updateData()
  // }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

